import {exeControlCommand} from '@/api/setting'
import {CCard} from '@/components/card'
import {IconImg} from '@/components/images'
import {View,Switch} from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
// import { AtForm, AtSwitch } from 'taro-ui'



export const ControllBtn: React.FC<{controll: Setting.DevControll}> = (
  {
  controll,
  children,
  rainwaterChecked,
  setRainwaterCheckedFunc,
}): JSX.Element => {
  enum ControllImgNameMap {
    '0210' = 'devControll-read',
    '0211' = 'devControll-write',
    '0212' = 'devControll-turnOn',
    '0213' = 'devControll-turnOff'
  }


  function handleControllBtnClick() {
    switch (controll.controlCode) {
      case '0213':
        Taro.showModal({
          title: '确认是否关闭',
          success(res) {
            console.log('close success', res)
            if (res.confirm) {
              runControll()
            }
          }
        })
        break
      case '0210':
      case '0211':
      case '0212':
      default:
        runControll()
        break
    }
  }

  function runControll() {

    if(controll.controlName!='雨水开启'&& controll.controlName!='污水开启'){
      Taro.showLoading({
        title: '执行中...'
      })
      exeControlCommand({controlId: controll.controlId})
      .then(res => {
        Taro.hideLoading()
        if (res.msg) {
          Taro.showModal({
            content: res.msg
          })
        }
      })
      .catch(err => {
        if (err && err.msg) {
          Taro.showModal({
            content: err.msg
          })
        }
        Taro.hideLoading()
      })
    }
  }



  // const [rainwaterChecked,setRainwaterChecked] = useState(true)

  // let rainwaterChecked = true

  // function switchChange(){
  //   // let checked = !rainwaterChecked
  //   // setRainwaterChecked(checked)

  //   Taro.showLoading({
  //     title: '执行中'
  //   })
  //   // Taro.showLoading({
  //   //   title: '正在关闭'
  //   // })
  //   setTimeout(()=>{
  //     Taro.hideLoading()
  //   },2000)
  //   console.log(11111);

  // }


  function showSwitch(){
    let re = <></>
    if(controll.controlName=="雨水开启" && rainwaterChecked){
      re = showSwitchTrue()
    }else if(controll.controlName=="雨水开启" && !rainwaterChecked){
      re = showSwitchFalse()
    } else if(controll.controlName=="污水开启" && rainwaterChecked){

      re = showSwitchFalse()
    }else{
      re = showSwitchTrue()
    }
    // if(controll.controlName=="雨水开启"||controll.controlName=="污水开启"){
      return re
    // }
  }

  function showSwitchTrue(){
    return <Switch className='statusSwitch rainwaterOrSewage' onChange={setRainwaterCheckedFunc} style={{width:'40px',height:'20px'}} checked />
  }
  function showSwitchFalse(){
    return <Switch className='statusSwitch rainwaterOrSewage' onChange={setRainwaterCheckedFunc} style={{width:'40px',height:'20px'}}  />
  }

  return (
    <CCard onClick={handleControllBtnClick} style={{position:'relative'}}>
      {children
        ? children
        : [
            <View>
              <IconImg
                imgName={ControllImgNameMap[controll.controlCode]}
              ></IconImg>
            </View>,
            <View className="hanzi text-14 font-bold mb-2 truncate">
              {controll.controlName}
            </View>,
            <View className="hanzi text-14 text-xx_text truncate">
              {controll.controlDesc}
            </View>
            // <View>
            //     { showSwitch() }
            // </View>
          ]}
    </CCard>
  )
}
